import React from 'react';
import {Button, Rate, Input, Upload, Modal, message} from "antd";
import { PlusOutlined  } from '@ant-design/icons';
import axios from '../../util/http'
import * as url from '../../util/api'

const { TextArea } = Input;

//关于上传图片
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

class YiJian extends React.Component {
    constructor(props){
        super(props);
        this.state={
            yiJianPingFen:[   //评分数据
                {name:'功能满意程度',rate:5},
                {name:'系统易用程度',rate:5},
                {name:'系统稳定情况',rate:5},
                {name:'整体服务情况',rate:5},
            ],
            uploadImg:{   //上传图片数据
                previewVisible: false,
                previewImage: '',
                previewTitle: '',
                fileList: [],
            }
        }
    }
    //改变state的值
    changeState=(name,value)=>{
        this.setState({
            [name]:value
        })
    };
    //渲染评分星星
    showRate=()=>{
        let pingFen=[];
        this.state.yiJianPingFen.forEach(item=>{
            pingFen.push(
                <tr key={item.name}>
                    <td style={{width:'40%',padding:'5px 10px 5px 0',lineHeight:'20px',fontSiz:'16px'}}>{item.name}</td>
                    <td style={{width:'60%',padding:'5px 0 5px 5px',lineHeight:'18px',fontSiz:'16px'}}>
                        <Rate allowHalf defaultValue={item.rate} style={{color:'#f7b84f'}}/>
                    </td>
                </tr>
            )
        });
        return pingFen;
    };
    //关于上传图片(点击取消)
    handleCancel = () =>{
        let newUploadImg = Object.assign(this.state.uploadImg,{ previewVisible: false});
        this.changeState('uploadImg',newUploadImg);
    };
    //关于上传图片（预览）
    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        let newUploadImg = Object.assign(this.state.uploadImg,{
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
        });
        this.changeState('uploadImg',newUploadImg);
    };
    //关于上传图片（发生改变）
    handleChange = ({ fileList }) => {
        let newUploadImg = Object.assign(this.state.uploadImg,{fileList});
        this.changeState('uploadImg',newUploadImg);
    };
    //提交意见
    submitYiJian=()=>{
        axios({
            url:url.submitYiJian,
            method:'post',
            data:'',
        }).then(res=>{
            if (res.data.code===200){
                this.changeState('uploadImg',{previewVisible: false, previewImage: '', previewTitle: '', fileList: [], });
                this.changeState('yiJianPingFen',[{name:'功能满意程度',rate:5}, {name:'系统易用程度',rate:5}, {name:'系统稳定情况',rate:5}, {name:'整体服务情况',rate:5},]);
                message.success('提交成功');
            }else {
                message.error('提交失败');
            }
        })
    };
    render() {
        const pingFen=this.showRate();  //评分部分的渲染
        //关于上传图片
        const { previewVisible, previewImage, fileList, previewTitle } = this.state.uploadImg;
        const uploadButton = (
            <div>
                <PlusOutlined />
                <div className="ant-upload-text">最多5张</div>
            </div>
        );
        return (
            <div style={{padding:'40px 16px 16px'}}>
                {/*满意度评分*/}
                <div>
                    <p>满意度评分</p>
                    <table style={{width:'100%',marginBottom:'15px',color:'#415161'}}>
                        <tbody>
                        {pingFen}
                        </tbody>
                    </table>
                </div>
                {/*意见反馈*/}
                <div>
                    <p>意见反馈</p>
                    <TextArea rows={4} placeholder='请输入反馈内容' maxLength={300} style={{border:'1px solid #c6d3e3'}} autoSize={{ minRows: 5, maxRows: 8 }}/>
                    <p style={{textAlign:'right',fontSize:'12px',color:'#b0c0d0'}}>300字以内</p>
                </div>
                {/*上传图片*/}
                <div>
                    <Upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        listType="picture-card"
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                    >
                        {fileList.length >= 5 ? null : uploadButton}
                    </Upload>
                    <Modal
                        visible={previewVisible}
                        title={previewTitle}
                        footer={null}
                        onCancel={this.handleCancel}
                    >
                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                    </Modal>
                </div>
                {/*提交按钮*/}
                <div>
                    <Button type="primary" style={{border:'1px solid  #4BD0B6',backgroundColor:'#4BD0B6'}} onClick={this.submitYiJian}>提交</Button>
                </div>
            </div>
        );
    }
}

export default YiJian;